﻿@{
    ViewBag.Title = "PivotWeb";
}
<header>
    <div class="content-wrapper">
        <div class="float-left">
            <p class="site-title">
                <a href="~/">PivotWeb Kitchen Sink</a></p>
        </div>
    </div>
</header>
<script lang="JavasScript">
    function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }
    function getCollectionID(doWithIdFunc) {
        var id = document.getElementById("cID").value;
        if (id.length == 0) {
            document.getElementById("error").innerText = "Please enter a collection id";
            window.setInterval("clearError()", 2000);
        } else {
            // If it is a number, assume it is a collection id to be used directly.
            if (isNumber(id)) {
                var req = $.getJSON(window.location + "/api/Collections?id=" + id, "", function (data, success, xrt) {
                    doWithIdFunc(id);
                });
                req.fail(function () {
                    document.getElementById("error").innerText = "That collection ID does not exist";
                    window.setInterval("clearError()", 2000);
                });
            } else {
                // If a name, then try to do the look up.
                var req = $.getJSON(window.location + "/api/Collections?cName=" + id, "", function (data, success, xrt) {
                    if (success == "success") {
                        var nid = data["Id"];
                        doWithIdFunc(nid);
                    }
                });
                req.fail(function () {
                    document.getElementById("error").innerText = "Unknown collection name";
                    window.setInterval("clearError()", 2000);
                });
            }
        }
    }
    function clearError() {
        document.getElementById("error").innerText = "";
    }

    function openSLViewer() {
        getCollectionID(function (id) {
            window.location = window.location + "/SLViewer.html?cID=" + id;
        });
    }

    function openCXML() {
        getCollectionID(function(id){
            window.location = window.location + "/../PivotWebRenders/" + id + "/collection.cxml";
        });
    }

    function openImageList() {
        getCollectionID(function (id) {
            window.location = window.location + "/List?cID=" + id;
        });
    }
</script>
<div id="body">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Welcome to the Kitchen Sink of Pivot Collections!</h1>
                <h2>Use this service to upload images with metadata and view them in a Pivot View</h2>
            </hgroup>
        </div>
    </section>
    <section class="content-wrapper main-content clear-fix">
        <h3>The following steps should get you going:</h3>
        <ol class="round">
            <li class="one">
                <h5>Generate an image collection</h5>
                Use the web service to upload a series of png or jpeg images along with meta data. They are
                automatically rendered into an Pivot collection.
                <a href="~/doc/api.html">Learn more about the API. Bindings for C#, Python.</a>
            </li>

            <li class="two">
                <h5>View your collection</h5>
                If you have a large collection it may take a few minutes to be fully rendered, but something will almost always be there!
                Just enter the collection ID or collection name that the service gave you when you created the collection, and off you go!
                Use the Silverlight viewer on Mac or Windows for high performance viewing. The Javascript one for anything else (or if you don't want to
                install Sliverlight).
                <p>
                    Collection ID <input id="cID" type="text" /> <button onclick="openSLViewer()">Silverlight Viewer</button><b id="error"></b>
                    <br/>Debug: <a href="javascript:void(0);" onclick="openCXML();return false;">cxml</a> <a href="javascript:void(0);" onclick="openImageList(); return false;">images</a>
                </p>
            </li>
        </ol>
    </section>
</div>
